@()(implicit request: RequestHeader)
	@main("Species") {

	<style>

			.bootstrap-table .table > thead > tr > th {
				vertical-align: middle;
				text-align: center;
			}

			.bootstrap-table .table tbody > tr > td{
				vertical-align: middle;
				text-align: center;
			}

			.th-inner{
				justify-content: center;
			}

	</style>

		<div class="row">
			<div class="form-group col-sm-12">
				<h2 class="page-heading"
				style="text-align: left;
					border-bottom: 5px solid #e9f3f4">Species</h2>
			</div>
		</div>

		<div class="table-responsive" >
			<label>Select the columns to display:</label>
			<div id="checkbox" class="checkbox">

			</div>

			<div style="display: none;
				margin-bottom: 10px">Filtering conditions:
				<span id="filterCondition"></span>
			</div>

			<div style="display: none;
				margin-bottom: 10px">Sorting conditions:
				<span id="sortCondition"></span>
			</div>

			<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
			data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
			style="word-wrap: break-word"
			>
				<thead>

				</thead>
			</table>

			<div style="margin-top: 10px">
				CL, canopy length (cm); CW, canopy width (cm); FC, flush color; FoC, flower color; KR, kernel recovery (%); KW, kernel weight (g); LA, leaf apex; LB, leaf base; LD, leaf dimensions (cm); LLWR, leaf length/width ratio; LMS, leaf margin spines; LPN, leaves per node; LS, leaf shape; Max, maximum; Min, minimum; N/A, not applicable; NL, nut length (mm); NW, nut width (mm); NWt, nut weight (g); PL, petiole length; Ref, references; SE, standard error; ST, shell texture; STE, shell thickness at equator (mm); STH, shell thickness at hilum (mm); SW, shell weight (g); TC, trunk circumference (cm); TH, tree height (cm).
			</div>

			<div id="allFilterContent"></div>
		</div>

		<script>

				$(function () {

					Cultivars.init

				})

		</script>

	}
